<template>
    <div class="df fdc jcc w100 h100 p40 bsbb aife pr">
        <el-carousel interval="3000" motion-blur>
      <el-carousel-item>
        <div  class="w100 df aic h100 banner1">
            <img src="@/assets/imgs/swiper1-1.png" style="width: 23vw;height: 60vh;margin-left: 5%;border-radius: 16px;" alt="">

        </div>
      </el-carousel-item>
      <el-carousel-item>
        <div  class="w100 df aic h100 banner2">
            <img src="@/assets/imgs/swiper2-2.png" style="width:23vw;height: 60vh;margin-left: 5%;border-radius: 16px;" alt="">

        </div>
      </el-carousel-item>
    </el-carousel>
        <!-- <div class="df aic w100 header">
            <img class="logo" src="@/assets/imgs/logo.png" alt="">
            <img class="logo2" src="@/assets/imgs/lname.png" alt="">
            <img class="logo3" src="@/assets/imgs/lename.png" alt="">
        </div> -->
        <div class="login-mian">
            <div @click="changeLoginMethod" class="folding cp"></div>
            <div class="right-img">
                <img v-show="status ==1 || status == 4 || status ==3" class="hiden-img" src="@/assets/imgs/qr1.png" alt="">
                <img v-show="status == 2" class="hiden-img" src="@/assets/imgs/computer.png" alt="">
            </div>
            <div v-show="status == 1" class="df fdc w100 h100">
                <div class="df fdc">
                    <p class="welcome tal" v-show="status == 1">欢迎来到喵灵</p>
                    <p class="phone-login tal" v-show="status == 1">手机号登陆</p>
                </div>
                <div class="df fdc jcsb h100 mt20">
                    <el-form  v-show="status == 1 || status == 4" class="w100" :model="form">
                        <el-form-item class="w100">
                            <div class="df aic w100">
                                <el-select v-model="phoneBelong">
                                    <el-option :value="item.value" :label="item.label" v-for="item in options"
                                        :key="item.value"></el-option>
                                </el-select>
                                <el-input v-model="form.phone" clearable placeholder="请输入手机号"></el-input>
                            </div>
                        </el-form-item>
                        <el-form-item class="w100">
                            <div class="df aic w100">
                                <el-input v-model="form.verify" placeholder="请输入验证码"></el-input>
                                <el-button @click="getCaptCode" :disabled="isDisabled" class="ml5 verify-btn">获取验证码
                                    {{ is_get_capt_code?time+'s':'' }}
                                </el-button>
                            </div>
                            <div class="tal fs12">
                                登录视为您已阅读并同意喵灵 <span class="special"> 服务条款</span> 和<span class="special"> 隐私政策</span>
                            </div>
                        </el-form-item>
                        <el-form-item class="w100">
                            <el-button @click="login" class="w100 login-btn">立即登录</el-button>
                            <!-- <el-button  class="w100 login-btn" v-show="status == 4">立即注册</el-button> -->
                            <!-- <div class="tac w100 fs13 cp forget">
                                忘记密码
                            </div> -->
                        </el-form-item>
                    </el-form>
                    <div>
                        <div class="mt40">
                            <div></div>
                            <div class="title tac fs13">其他登录方式</div>
                            <div></div>
                        </div>
                        <div class="df aic jcc mt10">
                            <div  title="正在飞速开发中~~~" class="cp">
                                <!-- <img class="others" src="@/assets/imgs/dy.png" alt=""> -->
                                <img class="others" src="@/assets/imgs/hdy.png" alt="">
                            </div>
                            <div title="正在飞速开发中~~~" class="cp">
                                <!-- <img class="others" src="@/assets/imgs/wx.png" alt=""> -->
                                <img class="others" src="@/assets/imgs/hwx.png" alt="">
                            </div>
                        </div>
                        <div class="fs14 mt20">
                            没有账号？<span @click="status = 4" class="special">去注册</span>
                        </div>
                       
                    </div>
                </div>
            </div>
            <div v-show="status == 2" class="df fdc aic jcc">
                <p class="qr-login-title">扫码快捷登录</p>
                <p>使用 <span class="special">抖音App</span>扫描二维码</p>
                <div class="w100 df aic jcc"><img class="login-qr" src="@/assets/imgs/qr.png" alt=""></div>
                <div>
                    没有账号？<span @click="status = 4" class="special">去注册</span>
                </div>
            </div>
            <div class="w100" v-show="status == 3">
                <p class="qr-login-title tal mb40p">绑定手机号</p>
                <el-form class="w100">
                    <el-form-item class="w100">
                        <div class="df aic w100">
                            <el-select v-model="phone2">
                                <el-option :value="item.value" :label="item.label" v-for="item in options2"
                                    :key="item.value">

                                </el-option>
                            </el-select>
                            <el-input placeholder="请输入手机号">

                            </el-input>
                        </div>
                    </el-form-item>
                    <el-form-item class="w100">
                        <div class="df aic w100">
                            <el-input aria-placeholder="请输入验证码"></el-input>
                            <el-button @click="getCaptCode" :disabled="isDisabled" class="ml5 verify-btn">获取验证码
                                    {{ is_get_capt_code?time+'s':'' }}
                                </el-button>
                        </div>
                    </el-form-item>
                    <div class="tal fs12 mb40">登录视为您已阅读并同意喵灵<span class="special">服务条款</span>和<span  class="special">隐私政策</span></div>
                    <el-form-item class="w100">
                        <el-button @click="login" class="w100 mt20 login-btn">登录</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="df fdc jcsb h100" v-show="status == 4">
                <p class="welcome tal">注册</p>
                <p class="phone-login tal" >手机号注册</p>
                <div class="df fdc jcsb h100 mt20">
                    <el-form  class="w100" :model="form">
                        <el-form-item class="w100">
                            <div class="df aic w100">
                                <el-select v-model="phoneBelong">
                                    <el-option :value="item.value" :label="item.label" v-for="item in options"
                                        :key="item.value"></el-option>
                                </el-select>
                                <el-input v-model="form.phone" clearable placeholder="请输入手机号"></el-input>
                            </div>
                        </el-form-item>
                        <el-form-item class="w100">
                            <div class="df aic w100">
                                <el-input v-model="form.verify" placeholder="请输入验证码"></el-input>
                                <el-button @click="getCaptCode" :disabled="isDisabled" class="ml5 verify-btn">获取验证码
                                    {{ is_get_capt_code?time+'s':'' }}
                                </el-button>
                            </div>
                            <div class="tal fs12">
                                登录视为您已阅读并同意喵灵 <span class="special"> 服务条款</span> 和<span class="special"> 隐私政策</span>
                            </div>
                        </el-form-item>
                        <el-form-item class="w100">
                            <el-button  class="w100 login-btn">立即注册</el-button>
                           
                        </el-form-item>
                    </el-form>
                    <div>
                        <div class="fs14 mt20">
                            已有账号？<span @click="status = 1" class="special">去登录</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import { user_login ,get_user_info,get_capt_code} from '@/apis/users';
import { ElMessage } from 'element-plus';

const router = useRouter()


const status = ref(1)
const phoneBelong = ref('+86')
const options = ref([
    {
        value: '+86',
        label: '+86'
    }
])
const form = ref({
    phone: '',
    verify: ''
})
const phone2 = ref('+86')
const options2 = ref([
    {
        label: '+86',
        value: '+86'
    }
])
const isDisabled = ref(false)
const is_get_capt_code = ref(false)
const time  = ref(60)
let timer

// 根据权限调整显示的模块 --回到登录模块
const changeLoginMethod = ()=>{
    if(status.value == 1){
        status.value = 2
    }else if(status.value == 4){
        status.value = 2
    }else if(status.value == 3){
        status.value = 2
    }else{
        status.value = 1
    }
}


const login = async()=>{
    if(!form.value.phone){
        ElMessage.error('请输入正确的手机号')
        return
    }
    if(!form.value.verify){
        ElMessage.error('请输入正确的验证码')
        return
    }
    let data = {}
    data.phone = form.value.phone
    data.auth_code = form.value.verify
    try{
        let login_res = await user_login(data)
        if(login_res.data.code == 200){
            localStorage.setItem('token',JSON.stringify(login_res.data.data.token))
            let info_res = await get_user_info()
            if(info_res.data.data.is_new && info_res.data.data.is_new == 1){
                router.push('/newUser')
            }else{
                router.push('/view')
            }
        }
    }catch(e){
        ElMessage.error('系统繁忙，请稍后再试~~')
        console.log(e);
    }
}

const getCaptCode = async()=>{
    if(!form.value.phone){
        ElMessage.error('请输入正确的手机号')
        return
    }
    isDisabled.value = true
    is_get_capt_code.value = true
    timer = setInterval(()=>{
        time.value --
    },1000)
    try{
        let data = {}
        data.phone = form.value.phone
        let res = await get_capt_code(data)
        if(res.data.code == 200){
            ElMessage.success('验证码获取成功')
        }
    }catch(e){

    }
}

watch(()=>time.value,(newVal)=>{
    console.log(newVal);
    if(newVal == 0){
        clearInterval(timer)
        isDisabled.value = false
        is_get_capt_code.value = false
        time.value = 60
    }
})
</script>
<style lang="scss" scoped>
.logo {
    width: 3%;
    margin-right: 20px;
}

.logo2 {
    width: 5%;
    margin-right: 10px;
}

.logo3 {
    width: 11%;
}

.demonstration {
  color: var(--el-text-color-secondary);
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.login-mian {
    margin-right: 5%;
    width: 23vw;
    // height: 630px;
    height: 60vh;
    box-shadow: -3px 0px 10px -5px #000;
    border-radius: 20px;
    padding: 40px;
    position: relative;
    z-index: 1;
    background: linear-gradient(225deg, #fff 60px, #fff 60px);
}

.welcome {
    font-weight: 600;
    font-size: 24px;
}

.phone-login {
    font-size: 16px;
    font-weight: 600;
    padding: 5px 0;
    color: #00BB88;
    border-bottom: 2px solid #00BB88;
    width: fit-content;
}

.verify-btn {
    font-size: 13px;
    color: #42464E;
    background-color: #F8F9FA;
}

.special {
    color: #00BB88;
    cursor: pointer;
}

.login-btn {
    margin: 0 !important;
    background-color: #00BB88;
    color: #fff;
    padding: 20px 0;
}

.title {
    position: relative;
}

.title::after,
.title::before {
    position: absolute;
    width: 35%;
    height: 1px;
    background: #EAEDF1;
    content: '';
    top: 50%;
}

.banner1{
    background: url('@/assets/imgs/swiper1.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-color:rgba($color: (#000000), $alpha: .9);
}
.banner2{
    background: url('@/assets/imgs/swiper2.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-color:rgba($color: (#000000), $alpha: .9);
}


.title::after {
    left: 0;
}


.title::before {
    right: 0;
}

.others {
    width: 32px;
    height: 32px;
    margin-right: 20px;
}

.header {
    position: fixed;
    left: 20px;
    top: 20px;
}

.folding {
    position: absolute;
    top: 0;
    right: 0;
    border-top: 38px solid transparent;
    /*上三角透明*/
    border-right: 38px solid transparent;
    /*右三角透明*/
    border-bottom: 38px solid #fff;
    border-left: 38px solid #fff;
    box-shadow: -3px 3px 20px -15px;
    border-radius: 0 20px 0 20px;
    z-index: 3;
    background-color: rgba($color: #000000, $alpha: 0.1);
}

.hiden-img {
    width: 68px;
    background-color: #F8F9FA;
    border-radius: 20px;
    // background-color: #fff;
    // opacity: .1;
}

.right-img {
    width: 68px;
    height: 68px;
    border-radius: 20px;
    position: absolute;
    right: 0;
    top: 0;
    background-color: #F8F9FA;
    z-index: 2;
}
.qr-login-title{
    font-size: 24px;
    font-weight: 600;
}
.login-qr{
    width: 70%;
}
.mb40p{
    margin-bottom: 30%;
}
.forget:hover{
    color: #00BB88;
}
:deep(.el-select) {
    width: 100px;
}
:deep(.el-carousel){
    width: 100% !important;
    height: 100% !important;
    position: absolute;
    left:0;
    top: 0;
}
:deep(.el-carousel__container){
    width: 100%;
    height: 100% !important;
}
</style>